<template>
  <template v-for="(v, index) in modelValue" :key="index">
    <slot
      :item="item_"
      :index="index"
      :remove="remove"
      :modify="modify"
      :value="v"
    />
  </template>
  <slot name="add" :add="add" />
</template>

<script lang="ts" setup generic="T extends Aoe">
import type { Aoe } from 'aoe';
import type { ArrayProps } from './useArray';
import { useArray } from './useArray';
import type { Ref } from 'vue';

const props = defineProps<ArrayProps<T>>();
const modelValue = defineModel();

const { item_, remove, modify, add } = useArray<T>(
  modelValue as Ref<unknown[]>,
  props,
);

defineOptions({
  inheritAttrs: false,
});
</script>
<style scoped></style>
